<template>
  <div class="common-table">
      <Introduce title="普通表格">
          <template #introduce>
              常规表格,用于处理数据
          </template>
      </Introduce>


      <div class="operation">
          <el-button type="primary" size="medium" @click="addHandler">添加</el-button>
          <SvgIcon class="icon-btn" name="refresh" @myClick="refrshHandler"></SvgIcon>
      </div>
      <el-table :data="studentList"  v-loading="load" >
        <el-table-column
            prop="studentnumber"
            label="学号"
            align="center"
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            align="center"
            min-width="100">
        </el-table-column>
         <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="60">
        </el-table-column>
        <el-table-column
            prop="score"
            label="总学分"
            align="center"
            width="120">
        </el-table-column>
         <el-table-column
            prop="state"
            label="考核状态"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
             align="center"
            min-width="250">
        </el-table-column>
         <el-table-column
            prop="date"
            label="日期"
             align="center"
            width="180">
            <template #default="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150px"  align="center">
            <template #default="scope">
                <el-button
                size="mini"
                @click="updateHandler(scope)"
                >编辑</el-button>
                <el-button
                size="mini"
                type="danger"
               >删除</el-button>
            </template>
        </el-table-column>
      </el-table>

       <el-pagination
      :current-page="startPage"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totolPage">
       </el-pagination>

        <el-dialog title="添加信息" v-model="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="学号" :label-width="formLabelWidth">
                    <el-input v-model="form.studentnumber" placeholder="请输入学号" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.gender" placeholder="请选择活动区域">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="总学分" :label-width="formLabelWidth">
                    <el-input v-model="form.score" placeholder="请输入总学分" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="form.state" placeholder="请选择活动区域">
                        <el-option label="通过" value="通过"></el-option>
                        <el-option label="未通过" value="未通过"></el-option>
                        <el-option label="待审核" value="待审核"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                  <el-input v-model="form.address" placeholder="请输入地址" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                 </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sumbit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import {queryStudent} from '../../../api/student'
import { ElMessage } from 'element-plus'
export default {
    setup(){

        /** 变量定义部分 **/
        //表格数据
        let studentList = ref([])
        //起始页
        let startPage = ref(1)
        //页面容量
        let sizePage = ref(10)
        //数据总量
        let totolPage = ref(1)
        //加载标志
        let load = ref(false)
        //对话框显示
        let dialogFormVisible = ref(false);
        //对话框数据
        let form = reactive({
            studentnumber: '',
            name: '',
            gender: '',
            score: '',
            state: '',
            date: '',
            address: ''
        })
        //对话框标题
        let formTite = ref('')
        const formLabelWidth = '120px'


       /** 生命周期钩子  **/
       //页面挂载
       onMounted(()=>{
           getStudent()
       })

       /**表格事件处理**/
       //页面大小变化事件
       const handleSizeChange = (val)=>{
           sizePage.value = val
           getStudent()
       }
       //当前页变化事件
       const handleCurrentChange = (val)=>{
           startPage.value = val
           getStudent()
       }
       //表格编辑事件
       const updateHandler = (scope)=>{
           formTite.value = "修改信息"
           dialogFormVisible.value = true
           const row = scope.row
           form.studentnumber = row.studentnumber
           form.name = row.name
           form.gender = row.gender
           form.score = row.score
           form.state = row.state
           form.date = row.date
           form.address = row.address
       }

       /**操作栏事件处理**/
       //刷新按钮
       const refrshHandler = ()=>{
           getStudent()
       }

       //添加按钮
       const addHandler = ()=>{
           formTite.value = "添加信息"
           dialogFormVisible.value = true
           form.studentnumber = ''
           form.name = ''
           form.gender = ''
           form.score = ''
           form.state = ''
           form.date = ''
           form.address = ''
       }

       /** 对话框部分 **/
       //对话框取消按钮事件
       const cancel = ()=>{
           ElMessage.info('您已取消本次提交')
           dialogFormVisible.value = false
       }
       //对话框确定按钮事件
       const sumbit = ()=>{
           ElMessage.success('提交成功')
           dialogFormVisible.value = false
       }

       /**数据请求部分**/
       //请求学生数据
       const getStudent = ()=>{
           load.value = true
            queryStudent(startPage.value,sizePage.value).then(res=>{
                res = res.data
                studentList.value = res.data.list
                startPage.value = res.data.start
                sizePage.value = res.data.size
                totolPage.value = res.data.total
                load.value = false
            })
       }


       return {studentList,startPage,sizePage,totolPage,handleSizeChange,handleCurrentChange,load,refrshHandler,form,dialogFormVisible,formTite,addHandler,formLabelWidth,updateHandler,cancel,sumbit}
    }
}
</script>

<style lang="scss" scoped>
.common-table{

    .operation{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px 20px;
        background: #fff;
        & > *{
            margin: 0 15px;
        }

        .icon-btn:hover{
            color: #409eff;
            cursor: pointer;
        }
    }
}

.checked-group{
    display: flex;
    flex-direction: column;
}
</style>